(function () {
  class TyphoonLineLayer extends BaseLayer {
    constructor(config = {}) {
      super(config);
      this.minZoom = 0
      this.maxZoom = 21
      this.name =  'TyphoonLineLayer'
      this.noneTips = true
      this.initLayer({
        type: 'line',
        'layout': {
          'line-join': ['get', 'lineJoin'],
          'line-cap': ['get', 'lineCap']
        },
        'paint': {
          'line-color': ['get', 'lineColor'],
          'line-width': ['get', 'lineWidth']
        }
      })

    }


    getStyle(item) {
      item = Object.assign({}, item, {
        lineColor: item.lineColor || '#ff0000',
        lineWidth: item.lineWidth || 5,
      })
      return item
    }

    makeFeature(item) {
      item = this.getStyle(item)
      let f = {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: item.lineCoor
        },
        properties: {
          lineJoin: 'round',
          lineCap: 'round',
          icon: item.icon,
          ...item,
          data: item,
        }
      }
      return f
    }

    loadData(item, frame = 0) {
      if (!item) return
      if (!this.cacheData.length) {
        this.cacheData = [
          {
            lineCoor: [],
            lineWidth: 1,
            // 蓝色
            lineColor: '#0000ff',
            name: '线路1 red',
          },
        ]
      }

      this.cacheData[0].lineCoor.push(item)
      if (frame > 0) {
        this.refreshLayer()
      }

    }
  }


  window.addEventListener('mapCreatedEvent', ev => {
    new TyphoonLineLayer({
      name: 'TyphoonLineLayer'
    })
  })
})();
